<template>
  <div class="dashboard-container">
    <div class="app-container">
      <pageTools>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="addFn">添加员工</el-button>
        </template>
      </pagetools>

      <!-- 员工列表 -->
      <el-card style="margin-top:20px">
        <el-table :data="employeesList">
          <el-table-column label="用户名" prop="username" />
          <el-table-column label="邮箱" prop="email" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="setFn(row.id)">设置角色</el-button>
              <el-button size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-sizes="[2,5,10,20]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page="currentPage"
            style="margin-top:20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
      <!-- 添加员工 -->
      <addEmployees :show-dialog.sync="showDialog" @updateEve="getEmployees" />
      <!-- 编辑员工 -->
      <editEmployee ref="editEmp" :show-dialog.sync="valibleDialog" @updateEvent="getEmployees" />
      <!-- 设置角色 -->
      <assignRole ref="assign" :show-dialog.sync="settingDialog" />
    </div>
  </div>

</template>

<script>
import { getEmployeesList, getEmployeesTotal, getEmployeeInfoById, delEmployee } from '@/api/employees'
import addEmployees from './component/addEmployees.vue'
import editEmployee from './component/editEmployee.vue'
import assignRole from './component/assignRole.vue'
export default {
  components: { addEmployees, editEmployee, assignRole },
  data() {
    return {
      employeesList: [],
      limit: 2,
      start: 0,
      total: 0,
      currentPage: 1,
      showDialog: false,
      valibleDialog: false,
      page: 0,
      settingDialog: false
    }
  },
  created() {
    this.getEmployees()
    this.getTotal()
  },
  methods: {
    // 设置角色
    setFn(id) {
      this.settingDialog = true
      this.$refs.assign.getRole(id)
    },
    // 删除员工
    delFn(id) {
      this.$confirm('您确定删除吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        await delEmployee(id)
        if (this.employeesList.length === 1 && this.page !== 1) {
          this.page--
        }
        this.handleCurrentChange(this.page)
      }).catch(err => {
        console.log(err, '取消')
      })
    },
    // 编辑员工
    async editFn(id) {
      this.$refs.editEmp.formData = await getEmployeeInfoById(id)
      this.valibleDialog = true
    },
    // 添加员工
    addFn() {
      this.showDialog = true
    },
    // 获取员工总数
    async getTotal() {
      const res = await getEmployeesTotal()
      this.total = res
    },
    // 每页多少条数据
    handleSizeChange(val) {
      this.limit = val
      this.getEmployees()
    },
    // 分页功能
    handleCurrentChange(val) {
      this.page = val
      this.start = this.limit * (this.page - 1)
      this.getEmployees()
    },
    // 获取员工列表
    async getEmployees() {
      const res = await getEmployeesList({
        _limit: this.limit,
        _start: this.start
      })
      this.employeesList = res
      this.getTotal()
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
